<template>
  <div class="user-center-container">
    <el-card shadow="hover">
      <div class="header">
        <h2>个人中心</h2>
      </div>
      <el-form :model="user" label-width="80px" style="max-width: 400px; margin: 32px auto 0;">
        <el-form-item label="用户名">
          <el-input v-model="user.username" disabled />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="user.name" />
        </el-form-item>
        <el-form-item label="角色">
          <el-input v-model="user.role" disabled />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="user.email" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="user.phone" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const user = ref({
  username: 'student01',
  name: '张三',
  role: '学生',
  email: 'student01@example.com',
  phone: '13800000000',
});
</script>
<style scoped>
.user-center-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 32px 0;
  background: #f5f7fa;
  min-height: 100vh;
}
.header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
  justify-content: center;
}
</style> 